<template>
  <el-dialog title="编辑财务信息" :visible="isShowEdit" width="50%" @close="dialogClose" :before-close="handleClose">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button type="success" >查看日志</el-button>
        <el-button type="primary" @click="submitData()">保存</el-button>
        <el-button @click="dialogClose">取 消</el-button>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="editForm" label-width="auto">
        <el-row align="middle" :gutter="24" style="flex-wrap: wrap; display: flex;">
          <el-col :span="8">
            <el-form-item label="业务编号" prop="ywbh" style="float: left">
              <el-input v-model="ruleForm.ywbh" disabled style="width: 100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务类型" prop="ywlx" style="float: left">
              <el-input v-model="ruleForm.ywlx" disabled style="width: 100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车牌号" prop="cph" style="float: left">
              <el-input v-model="ruleForm.cph" disabled style="width: 100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收款状态" prop="skzt" style="float: left">
              <el-select v-model="ruleForm.skzt" clearable @change="typel(ruleForm.ywlx)">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实收金额" prop="ssje" style="float: left">
              <el-input v-model="ruleForm.ssje"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应收金额" prop="ysje" style="float: left">
              <el-input v-model="ruleForm.ysje"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="委托方" prop="wtf" style="float: left">
              <el-input v-model="ruleForm.wtf"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="对接人" prop="djr" style="float: left">
              <el-input v-model="ruleForm.djr"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="付款方" prop="fkf" style="float: left">
              <el-input v-model="ruleForm.fkf"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开票状态" prop="kpzt" style="float: left">
              <el-select v-model="ruleForm.kpzt" clearable @change="typel(ruleForm.ywlx)">
                <el-option v-for="item in opts" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发票编号" prop="fpbh" style="float: left">
              <el-input v-model="ruleForm.fpbh"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成本" prop="ajcb" style="float: left">
              <el-input v-model="ruleForm.ajcb"></el-input>
            </el-form-item>
          </el-col>
            <el-form-item label="备注" prop="remark" style="float: left">
              <el-input type="textarea" :rows="2" v-model="ruleForm.remark"></el-input>
            </el-form-item>
        </el-row>
      </el-form>

      <!-- <div style="display: flex;">
          <h3 class="title">缴费流水</h3>
          <el-button type="primary" @click="add()" class="addBtn">添加</el-button>
      </div>
      <hr>
      <br>

      <el-form v-for="(item, index) in addForm" :key="index" label-width="100px">
          <div></div>
          <el-row :gutter="24">
              <el-col :span="7">
                  <el-form-item label="日期" prop="date">
                      <el-date-picker class="select" v-model="item.date" type="date" placeholder="选择日期">
                      </el-date-picker>
                  </el-form-item>
              </el-col>
              <el-col :span="7">
                  <el-form-item label="金额" prop="money">
                      <el-input v-model="item.money"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="7">
                  <el-form-item label="备注" prop="addRemark">
                      <el-input v-model="item.addRemark"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="2">
                  <el-button type="danger" @click="del(index)">删除</el-button>
              </el-col>
          </el-row>
      </el-form>

      <span style="display: flex; margin-right: 1%; margin-top: 6%;">
          <div style="flex: 1"></div>
          <el-button @click="dialogClose">取 消</el-button>
          <el-button type="primary" @click="submitData()">确 定</el-button>
      </span> -->
    </el-card>
  </el-dialog>
</template>

<script>
import { edit } from "@/api/evaluation/financeList";
import { findByName } from "@/api/systemManage/dataDictionary";
export default {
  props: {
    record: {
      type: Object,
    },
    isShowEdit: {
      type: Boolean,
    },
  },
  data () {
    return {
      ruleForm: {},
      options: [],
      opts: [],
      addForm: [
        {
          date: "2022-10-17",
          money: "1000",
          addRemark: "test",
        },
        {
          date: "",
          money: "",
          addRemark: "",
        },
      ],
      rules: {
        type: [{ required: false }],
        client: [{ required: false }],
        payer: [{ required: false }],
        receivableMoney: [{ required: true, message: "请输入" }],
        actualMoney: [{ required: true, message: "请输入" }],
        id: [{ required: true, message: "请输入" }],
        state: [{ required: true, message: "请选择" }],
        remark: [{ required: false }],
        date: [{ required: false }],
        money: [{ required: false }],
        addRemark: [{ required: false }],
      },
    };
  },
  methods: {
    dialogClose () {
      this.$emit("dialogClose");
    },
    submitData () {
      this.$refs.editForm.validate((valid) => {
        if (!valid) {
          return;
        } else {
          edit(this.ruleForm).then((res) => {
            this.$message.success("操作成功");
            this.$emit("getList");
            this.$emit("dialogClose");
          });
        }
      });
    },
    handleClose (done) {
      done();
    },
    add () {
      this.addForm.push({
        date: "",
        money: "",
        addRemark: "",
      });
    },
    del (index) {
      this.addForm.splice(index, 1);
    },
    sktype () {
      findByName("input=" + "收款状态").then((res) => {
        for (var i = 0; i < res.data.length; i++) {
          if (res.data[i].dictName == '收款状态')
            this.options.push({
              label: res.data[i].dictValue,
              value: res.data[i].dictValue,
            });
        }
      });
    },
    kptype () {
      findByName("input=" + "开票状态").then((res) => {
        for (var i = 0; i < res.data.length; i++) {
          if (res.data[i].dictName == '开票状态')
            this.opts.push({
              label: res.data[i].dictValue,
              value: res.data[i].dictValue,
            });
        }
      });
    },
  },
  mounted () {
    this.ruleForm = Object.assign({}, this.record);
    this.sktype();
    this.kptype();
  },
};
</script>

<style scoped>
/* .title {
  margin: 2% 0 0 2%;
} */

.el-radio__label {
  padding-left: 6px !important;
}

/*.el-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}*/

/* .select {
  width: 50%;
} */

.el-dialog__close,
.el-message-box__close {
  color: #606266 !important;
}

/* .addBtn {
  height: 36px;
  margin: 1% 0 0 10px;
} */
</style>

